<template>
    <view class="goods-img-status">{{ text }}</view>
</template>

<script setup>
const props = defineProps({
    text: { type: String, default: '已售罄' },
    width: { type: String, default: '196rpx' },
    lineWidth: { type: String, default: '146rpx' },
    fontSize: { type: String, default: '44rpx' }
});
</script>

<style lang="scss" scoped>
.goods-img-status {
    position: absolute;

    word-break: keep-all;

    color: #ffffff;

    font-family: PingFangSC-Regular, PingFang SC;

    font-size: v-bind(fontSize);

    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 50%;

    left: 50%;

    width: v-bind(width);

    height: v-bind(width);

    border-radius: 50%;

    background: rgba(51, 48, 45, 0.6);
    transform: translate(-50%, -50%);
    &::before,
    &::after {
        margin: 8rpx 0;
        content: '';
        top: 0;
        left: 0;
        width: v-bind(lineWidth);
        height: 2rpx;
        background: #ffffff;
    }
}
</style>
